<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小菊AI问诊 - 注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #f5f9fc 0%, #e8f5e9 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            padding: 15px;
        }

        .login-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .login-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(46, 125, 50, 0.15);
            overflow: hidden;
            display: flex;
            min-height: 600px;
        }

        .login-left {
            background: linear-gradient(rgba(56, 142, 60, 0.85), rgba(46, 125, 50, 0.9)), url('http://8.130.34.212:7301/api/v1/buckets/xiaoju/objects/download?preview=true&prefix=auth_bg.jpg&version_id=null') center/cover;
            color: white;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1.2;
        }

        .login-right {
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
        }

        .brand-text {
            font-size: 42px;
            font-weight: 800;
            margin-bottom: 25px;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            letter-spacing: 1px;
        }

        .welcome-text {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 20px;
            color: white;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin-top: 30px;
        }

        .feature-list li {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
            font-size: 18px;
            line-height: 1.6;
        }

        .feature-list i {
            margin-right: 15px;
            font-size: 24px;
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .login-title {
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            color: #2e7d32;
            margin-bottom: 35px;
            position: relative;
        }

        .login-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: #4caf50;
            border-radius: 2px;
        }

        .divider {
            text-align: center;
            position: relative;
            margin: 25px 0;
        }

        .divider:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e0e0e0;
            z-index: 1;
        }

        .divider-text {
            display: inline-block;
            background-color: white;
            padding: 0 15px;
            position: relative;
            z-index: 2;
            color: #757575;
            font-size: 14px;
        }

        .login-footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 14px;
        }

        .login-footer a {
            color: #2e7d32;
            text-decoration: none;
            font-weight: 500;
        }

        .login-footer a:hover {
            text-decoration: underline;
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        .layui-input {
            height: 50px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding-left: 20px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .layui-input:focus {
            border-color: #4caf50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
        }

        .layui-btn {
            height: 50px;
            line-height: 50px;
            border-radius: 8px;
            font-size: 18px;
            background: #2e7d32;
            transition: all 0.3s;
        }

        .layui-btn:hover {
            background: #1b5e20;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
        }

        .layui-form-checked[lay-skin=primary] i {
            background-color: #2e7d32;
            border-color: #2e7d32;
        }

        .forgot-link {
            color: #2e7d32;
            font-weight: 500;
        }

        .forgot-link:hover {
            text-decoration: underline;
        }

        .register-link {
            color: #2e7d32;
            font-weight: 600;
        }

        .password-strength {
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }

        .password-strength-bar {
            height: 100%;
            width: 0;
            background: #ff5722;
            transition: all 0.3s;
        }

        .password-strength-text {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }

        .password-strength.weak .password-strength-bar {
            background: #ff5722;
            width: 33%;
        }

        .password-strength.medium .password-strength-bar {
            background: #ffb800;
            width: 66%;
        }

        .password-strength.strong .password-strength-bar {
            background: #2e7d32;
            width: 100%;
        }

        /* 服务条款弹窗样式 */
        .terms-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .terms-content {
            background: white;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .terms-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .terms-title {
            font-size: 24px;
            font-weight: 700;
            color: #2e7d32;
        }

        .close-terms {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }

        .terms-body {
            line-height: 1.8;
            color: #555;
        }

        .terms-body h3 {
            color: #2e7d32;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 18px;
        }

        .terms-body p {
            margin-bottom: 15px;
        }

        .terms-body ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .terms-body li {
            margin-bottom: 8px;
        }

        /* 复选框和文字在同一行 */
        .agree-container {
            display: flex;
            align-items: center;
        }

        .agree-text {
            margin-left: 10px;
            line-height: 1.5;
        }

        .terms-link {
            color: #2e7d32;
            text-decoration: none;
            font-weight: 500;
            margin: 0 5px;
        }

        .terms-link:hover {
            text-decoration: underline;
        }

        /* 手机端优化 */
        @media (max-width: 992px) {
            .login-left {
                display: none; /* 在平板和手机上隐藏左侧区域 */
            }

            .login-right {
                width: 100%;
                padding: 40px 30px;
            }

            .login-title {
                font-size: 28px;
            }

            .terms-content {
                width: 90%;
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .login-right {
                padding: 35px 25px;
            }

            .login-title {
                font-size: 26px;
                margin-bottom: 25px;
            }

            .layui-input {
                height: 48px;
                font-size: 16px;
            }

            .layui-btn {
                height: 48px;
                line-height: 48px;
                font-size: 17px;
            }

            .terms-content {
                width: 95%;
                max-height: 85vh;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 10px;
                background: white;
            }

            .login-container {
                width: 100%;
            }

            .login-card {
                min-height: auto;
                box-shadow: none;
                border-radius: 0;
            }

            .login-right {
                padding: 30px 20px;
            }

            .login-title {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .login-title:after {
                width: 60px;
                height: 3px;
                bottom: -8px;
            }

            .layui-form-item {
                margin-bottom: 20px;
            }

            .layui-input {
                height: 46px;
                font-size: 15px;
                padding-left: 15px;
            }

            .layui-btn {
                height: 46px;
                line-height: 46px;
                font-size: 16px;
            }

            .remember-forgot {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 15px;
            }

            .remember-forgot .layui-form-item {
                margin-bottom: 10px;
            }

            .login-footer {
                margin-top: 25px;
                font-size: 13px;
            }

            .agree-text {
                font-size: 14px;
            }

            .terms-content {
                padding: 15px;
            }

            .terms-title {
                font-size: 20px;
            }
        }

        /* 针对430x932分辨率的优化 */
        @media (max-width: 480px) and (max-height: 932px) {
            .login-right {
                padding: 25px 20px;
                justify-content: flex-start;
            }

            .mobile-brand {
                display: block;
                margin-bottom: 15px;
            }

            .login-title {
                font-size: 22px;
                margin-bottom: 15px;
            }

            .layui-form-item {
                margin-bottom: 20px;
            }

            .layui-input {
                height: 44px;
                font-size: 14px;
            }

            .layui-btn {
                height: 44px;
                line-height: 44px;
                font-size: 16px;
            }

            .remember-forgot {
                margin-bottom: 10px;
            }

            .login-footer {
                margin-top: 20px;
            }
        }

        @media (max-width: 360px) {
            .login-right {
                padding: 25px 15px;
            }

            .login-title {
                font-size: 22px;
            }

            .layui-input {
                height: 44px;
                font-size: 14px;
            }

            .layui-btn {
                height: 44px;
                line-height: 44px;
                font-size: 15px;
            }

            .agree-text {
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-card">
        <!-- 左侧欢迎区域（在手机上隐藏） -->
        <div class="login-left">
            <div class="brand-text">小菊AI问诊</div>
            <div class="welcome-text">加入我们</div>
            <p>创建账户以开始使用我们的AI问诊服务</p>

            <ul class="feature-list">
                <li>
                    <i class="fas fa-brain"></i>
                    <div>AI智能诊断，精准识别健康问题<br><small>基于深度学习的医学诊断模型</small></div>
                </li>
                <li>
                    <i class="fas fa-clock"></i>
                    <div>7×24小时AI医生在线咨询<br><small>随时解答您的健康疑问</small></div>
                </li>
                <li>
                    <i class="fas fa-chart-line"></i>
                    <div>个性化健康分析与趋势预测<br><small>提供专属健康管理方案</small></div>
                </li>
                <li>
                    <i class="fas fa-shield-alt"></i>
                    <div>医疗级数据加密与隐私保护<br><small>您的健康数据绝对安全</small></div>
                </li>
            </ul>
        </div>

        <!-- 右侧注册表单 -->
        <div class="login-right">
            <!-- 手机端显示的品牌标识 -->
            <div class="mobile-brand" style="display: none; text-align: center; margin-bottom: 20px;">
                <div style="font-size: 28px; font-weight: 700; color: #2e7d32;">小菊AI问诊</div>
                <div style="font-size: 16px; color: #666; margin-top: 5px;">智能医疗健康服务平台</div>
            </div>

            <h2 class="login-title">创建账户</h2>

            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <input type="email" name="email" lay-verify="required|email" placeholder="请输入邮箱地址"
                           autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                    <div class="password-strength" id="password-strength">
                        <div class="password-strength-bar"></div>
                    </div>
                    <div class="password-strength-text" id="password-strength-text">密码强度：弱</div>
                </div>

                <div class="layui-form-item">
                    <input type="password" name="confirm_password" lay-verify="required|confirmPass"
                           placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                </div>

                <div class="remember-forgot">
                    <div class="layui-form-item">
                        <div class="agree-container">
                            <input type="checkbox"  name="agree" lay-verify="required" lay-skin="primary"
                                   style="vertical-align: middle">
                            <div class="agree-text" style="display: inline-block; vertical-align: middle;margin-top: 8px;margin-left: -4px">
                                我已阅读并同意
                                <a href="javascript:void(0);" class="terms-link" id="terms-link">服务条款</a>
                                和
                                <a href="javascript:void(0);" class="terms-link" id="privacy-link">隐私政策</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注册</button>
                </div>
            </form>

            <div class="login-footer">
                已有账户? <a href="login.html" class="register-link">立即登录</a><br>
                <span style="font-size: 12px; margin-top: 10px; display: block;">© 2023 小菊AI问诊 版权所有</span>
            </div>
        </div>
    </div>
</div>

<!-- 服务条款弹窗 -->
<div class="terms-modal" id="terms-modal">
    <div class="terms-content">
        <div class="terms-header">
            <h2 class="terms-title">服务条款</h2>
            <button class="close-terms" id="close-terms">&times;</button>
        </div>
        <div class="terms-body">
            <h3>1. 接受条款</h3>
            <p>通过访问和使用小菊AI问诊服务，您同意遵守本服务条款。如果您不同意这些条款，请不要使用我们的服务。</p>

            <h3>2. 服务描述</h3>
            <p>
                小菊AI问诊提供基于人工智能的健康咨询和分析服务。我们的服务旨在为用户提供健康建议，但不能替代专业医疗诊断和治疗。</p>

            <h3>3. 用户责任</h3>
            <p>您同意提供准确、完整的个人信息，并对您的账户安全负责。您不得使用我们的服务进行任何非法活动。</p>

            <h3>4. 隐私保护</h3>
            <p>我们承诺保护您的个人隐私。您的健康数据将受到严格保护，不会未经授权共享给第三方。</p>

            <h3>5. 服务限制</h3>
            <p>小菊AI问诊服务不适用于紧急医疗情况。在紧急情况下，请立即联系当地急救服务或前往最近的医疗机构。</p>

            <h3>6. 知识产权</h3>
            <p>所有服务内容，包括但不限于文本、图形、用户界面、代码等，均为小菊AI问诊的财产，受知识产权法保护。</p>

            <h3>7. 免责声明</h3>
            <p>小菊AI问诊服务仅供参考，不构成医疗建议。对于因使用或无法使用服务而导致的任何损害，我们不承担责任。</p>

            <h3>8. 条款修改</h3>
            <p>我们保留随时修改本条款的权利。修改后的条款将在网站上公布后生效。</p>
        </div>
    </div>
</div>

<!-- 隐私政策弹窗 -->
<div class="terms-modal" id="privacy-modal">
    <div class="terms-content">
        <div class="terms-header">
            <h2 class="terms-title">隐私政策</h2>
            <button class="close-terms" id="close-privacy">&times;</button>
        </div>
        <div class="terms-body">
            <h3>1. 信息收集</h3>
            <p>我们收集的信息包括：您提供的注册信息、健康咨询内容、设备信息和日志数据。</p>

            <h3>2. 信息使用</h3>
            <p>我们使用您的信息来：提供和改进服务、个性化用户体验、进行研究和分析、与您沟通。</p>

            <h3>3. 信息共享</h3>
            <p>我们不会出售您的个人信息。在以下情况下，我们可能会共享信息：</p>
            <ul>
                <li>获得您的明确同意</li>
                <li>为提供服务给第三方服务提供商</li>
                <li>遵守法律要求或保护我们的权利</li>
            </ul>

            <h3>4. 数据安全</h3>
            <p>我们采取行业标准的安全措施保护您的数据，包括加密传输、访问控制和定期安全审计。</p>

            <h3>5. 数据保留</h3>
            <p>我们仅在提供服务所需的时间内保留您的个人信息，除非法律要求更长的保留期。</p>

            <h3>6. 您的权利</h3>
            <p>您有权：访问您的个人信息、更正不准确信息、删除您的账户和数据、限制处理您的数据。</p>

            <h3>7. 未成年人隐私</h3>
            <p>我们的服务不面向16岁以下用户。如果我们发现收集了未成年人的信息，将立即删除。</p>

            <h3>8. 政策变更</h3>
            <p>我们可能更新本政策。重大变更将通过电子邮件或在网站上通知您。</p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.min.js"></script>
<script src="/static/js/api_config.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 检测设备类型，在手机上显示品牌标识
        function checkDevice() {
            if (window.innerWidth <= 992) {
                document.querySelector('.mobile-brand').style.display = 'block';
            } else {
                document.querySelector('.mobile-brand').style.display = 'none';
            }
        }

        // 初始检测
        checkDevice();

        // 窗口大小变化时检测
        window.addEventListener('resize', checkDevice);

        // 密码强度检测
        $('#password').on('input', function () {
            var password = $(this).val();
            var strength = 0;
            var strengthText = '弱';
            var strengthClass = 'weak';

            if (password.length >= 8) strength++;
            if (/[A-Z]/.test(password)) strength++;
            if (/[0-9]/.test(password)) strength++;
            if (/[^A-Za-z0-9]/.test(password)) strength++;

            if (strength > 3) {
                strengthText = '强';
                strengthClass = 'strong';
            } else if (strength > 1) {
                strengthText = '中';
                strengthClass = 'medium';
            }

            $('#password-strength').attr('class', 'password-strength ' + strengthClass);
            $('#password-strength-text').text('密码强度：' + strengthText);
        });

        // 自定义验证规则 - 确认密码
        form.verify({
            confirmPass: function (value) {
                if ($('input[name=password]').val() !== value) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 服务条款链接点击事件
        $('#terms-link').on('click', function () {
            $('#terms-modal').css('display', 'flex');
        });

        // 隐私政策链接点击事件
        $('#privacy-link').on('click', function () {
            $('#privacy-modal').css('display', 'flex');
        });

        // 关闭服务条款弹窗
        $('#close-terms').on('click', function () {
            $('#terms-modal').css('display', 'none');
        });

        // 关闭隐私政策弹窗
        $('#close-privacy').on('click', function () {
            $('#privacy-modal').css('display', 'none');
        });

        // 点击弹窗外部关闭
        $('.terms-modal').on('click', function (e) {
            if (e.target === this) {
                $(this).css('display', 'none');
            }
        });

        // 表单验证和提交
        form.on('submit(register)', function (data) {
            // 显示加载状态
            var loadIndex = layer.load(0, {shade: [0.2, '#fff']});

            // 使用API_CONFIG进行实际的注册请求
            API_CONFIG.request(API_CONFIG.AUTH.REGISTER, {
                method: 'POST',
                body: JSON.stringify(data.field)
            })
                .then(function (response) {
                    layer.close(loadIndex);

                    if (response.code === 200) {
                        layer.msg('注册成功！', {
                            icon: 1,
                            time: 1500
                        }, function () {
                            // 注册成功后跳转到登录页面
                            window.location.href = 'login.html';
                        });
                    } else {
                        layer.msg(response.message || '注册失败，请重试', {
                            icon: 5,
                            time: 2000
                        });
                    }
                })
                .catch(function (error) {
                    layer.close(loadIndex);
                    layer.msg('注册失败：' + (error.message || '网络错误'), {
                        icon: 5,
                        time: 2000
                    });
                    console.error('Register error:', error);
                });

            return false;
        });
    });
</script>
</body>
</html>